<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-09 13:39:39
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-12-13 13:09:06
 * @Description: 12345热线
 * @FilePath: \tuanfeng-admin-front\src\pages\Question\index.vue
-->
<script setup lang="ts">
import moment from "moment";
import { Search, Plus } from "@element-plus/icons-vue";
import SearchItem from "../../components/SearchItem.vue";
import TableCell from "../../components/TableCell.vue";
import EditDrawer from "../../components/EditDrawer.vue";
import Editor from "../../components/Editor.vue";
import LogDialog from "../../components/LogDialog.vue";
import { ElMessage } from "element-plus";
import {
    updateOrderIsOpenAPI,
    deleteOrderAPI
} from "../../api/order";
import { ref, reactive } from "vue";
import useTable from "./useTable";
import useForm from "./useForm";
import { useRoute } from "vue-router";
import { useRoleStore } from "../../store/role.js";

const path = useRoute().path;
const permissions = useRoleStore().permissions;
const permission = permissions[path] || {};

const logVisible = ref(false);
// 查询条件
let filters = reactive({
    pageNo: 1,
    pageSize: 10,
});

// 列表数据
const { tableData, loading, totalCount, createTime, orderTypes, query } =
    useTable(filters);

// 编辑表单
const { dialogVisible, formRef, isEdit, form, deptsList, handleEdit, handleConfirm } =
    useForm(query);

// 公开
const handleOpen = (row) => {
    let { id, isOpen } = row;
    updateOrderIsOpenAPI({
        id,
        isOpen: !isOpen
    }).then((res) => {
        if (res.code === 200) {
            ElMessage({
                message: "更新成功",
                type: "success",
            });
            query();
        }
    });
};

// 删除
const handleDelete = (id: string) => {
    deleteOrderAPI({
        id,
    }).then((res) => {
        if (res.code === 200) {
            ElMessage({
                message: "删除成功",
                type: "success",
            });
            query();
        }
    });
};

const onUploadSuccess = (data: any) => {
    form.fileList[0] = {
        name: data.data.name,
        url: data.data.url,
    };
};

const beforUpload = (file) => {
    let { size, type } = file;
    let sizeLimit = 1024 * 1024 * 20; // 20MB
    let typeLimit = ["application/pdf"];
    let flag = false;
    typeLimit.forEach((item) => {
        if (type === item) {
            flag = true;
        }
    });

    if (!flag) {
        ElMessage({
            message: "请上传PDF类型的附件",
            type: "error",
        });
        return false;
    }
    if (size > sizeLimit) {
        ElMessage({
            message: "上传附件大小不能超过20MB",
            type: "error",
        });
        return false;
    }
    return true;
};

const satisfyFilter = (num: number) => {
    switch(num) {
        case 5: 
            return '非常满意';
        case 4: 
            return '满意';
        case 3: 
            return '基本满意';
        case 2: 
            return '基本不满意';
        case 1: 
            return '非常不满意';
        default:
            return '';
    }
}

const colorFilter = (num: number) => {
    switch(num) {
        case 5: 
            return '#67C23A';
        case 4: 
            return '#67C23A';
        case 3: 
            return '#E6A23C';
        case 2: 
            return '#E6A23C';
        case 1: 
            return '#F56C6C';
        default:
            return '';
    }
}

const rules = reactive({
    acceptDeptName: [{ required: true, message: "请输入受理部门", trigger: "blur" }],
    reply: [{ required: true, message: "请输入回复内容", trigger: "blur" }],
});
</script>

<template>
    <div>
        <el-card class="search-wrapper common-card">
            <el-row :gutter="24">
            </el-row>

            <div class="search-button-wrapper">
                <!-- <el-button :icon="Plus" plain auto-insert-space @click="() => handleEdit(false)">新增</el-button> -->
                <!-- <el-button v-if="permission['导出']" :icon="Plus" plain auto-insert-space @click="() => handleExport()">导出</el-button> -->
                <el-button type="primary" :icon="Search" auto-insert-space @click="query">查询</el-button>
            </div>
        </el-card>

        <!-- Table -->
        <el-card class="common-card" style="width: 100%">
            <!-- 列表 -->
            <el-table v-loading="loading" :data="tableData" stripe width="1500px">
                <el-table-column prop="id" label="id" width="80" />
                <el-table-column prop="name" label="姓名" width="100" />
                <el-table-column prop="phone" label="手机号" width="120" />
                <el-table-column prop="mail" label="邮箱" width="150" />
                <el-table-column prop="typeName" label="问题类型"  width="60"/>
                <el-table-column prop="title" label="诉求标题" width="200">
                    <template #default="scope">
                        <TableCell :content="scope.row.title"></TableCell>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="诉求内容" width="200">
                    <template #default="scope">
                        <TableCell :content="scope.row.content"></TableCell>
                    </template>
                </el-table-column>
                
                <el-table-column prop="isOpen" label="是否公开" width="60">
                    <template #default="scope">
                        <div>{{scope.row.isOpen ? '是' : '否'}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="isTownCall" label="是否乡镇呼叫" width="70">
                    <template #default="scope">
                        <div>{{scope.row.isTownCall ? '是' : (scope.row.isTownCall == false ? '否' : '')}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="fileList" label="附件" width="300">
                    <template #default="scope">
                        <el-link v-for="(item, index) in scope.row.fileList" :key="index" type="primary" :href="item.url" target="_black">
                            {{item.name}}{{(index + 1) == scope.row.fileList.length ? '' : ','}}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="replyStatus" label="回复状态" width="120">
                    <template #default="scope">
                        <span :class="{
                            color_success: scope.row.replyStatus === 1,
                            color_primary: scope.row.replyStatus === 0,
                        }">{{ scope.row.replyStatus === 1 ? "已回复" : "未回复" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="acceptDeptName" label="受理部门" width="200">
                    <template #default="scope">
                        <div>{{scope.row.acceptDeptName || '-'}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="reply" label="回复内容" width="200">
                    <template #default="scope">
                        <TableCell :content="scope.row.reply"></TableCell>
                    </template>
                </el-table-column>
                <el-table-column prop="fileName" label="回复附件" width="250">
                    <template #default="scope">
                        <el-link type="primary" :href="scope.row.filePath" target="_blank">{{scope.row.filePathName}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="isSatisfy" label="总体评价" width="120">
                    <template #default="scope">
                        <span :style="{color: colorFilter(scope.row.totalEstimate)}">{{ satisfyFilter(scope.row.totalEstimate) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="appraiseContent" label="评价意见">
                    <template #default="scope">{{scope.row.appraiseContent || ''}}</template>
                </el-table-column>
                <el-table-column prop="createDate" label="提交时间" width="200" />
                <el-table-column prop="updateDate" label="回复时间" width="200">
                    <template #default="scope">
                        <div>{{scope.row.replyStatus === 1 ? scope.row.updateDate : '-'}}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-button v-if="permission['回复']" type="text" @click="() => handleEdit(scope.row)">{{scope.row.replyStatus === 1 ? "修改回复" : "回复"}}</el-button>
                        <!-- 公开 -->
                        <el-popconfirm v-if="permission['公开']" :title="`确定${scope.row.isOpen ? '取消公开' : '公开'}吗?`" @confirm="handleOpen(scope.row)">
                            <template #reference>
                                <el-button type="text">{{scope.row.isOpen ? '取消公开' : '公开'}}</el-button>
                            </template>
                        </el-popconfirm>
                        <!-- 删除 -->
                        <el-popconfirm v-if="permission['删除']" :title="`确定删除吗?`" @confirm="handleDelete(scope.row.id)">
                            <template #reference>
                                <el-button class="color_danger" type="text">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无数据"></el-empty>
                </template>
            </el-table>
            <!-- 分页 -->
            <el-pagination style="margin-top: 20px; justify-content: flex-end" background layout="total, sizes, prev, pager, next" :total="totalCount" :default-current-page="1" v-model:current-page="filters.pageNo" v-model:page-size="filters.pageSize"></el-pagination>
            <div v-if="permission['操作日志']" style="text-align: center; margin-top: 10px">
                <el-button type="primary" link @click="logVisible = true">查看操作日志</el-button>
            </div>
        </el-card>

        <EditDrawer title="回复问题" :visible="dialogVisible" @update:visible="dialogVisible = $event" @confirm="handleConfirm">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
                <div class="form-item">
                    <div class="form-item-label">问题类型</div>
                    <div class="form-item-value">{{form.typeName}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">提交时间</div>
                    <div class="form-item-value">{{form.createDate}}</div>
                </div>
                <div v-if="form.replyStatus === 1" class="form-item">
                    <div class="form-item-label">回答时间</div>
                    <div class="form-item-value">{{form.updateDate}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">姓名</div>
                    <div class="form-item-value">{{form.createBy}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">诉求标题</div>
                    <div class="form-item-value">{{form.title}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">诉求内容</div>
                    <div class="form-item-value">{{form.content}}</div>
                </div>
                <el-form-item label="受理部门" prop="acceptDeptName">
                    <el-input style="width: 400px" v-model="form.acceptDeptName" placeholder="请输入受理部门"></el-input>
                </el-form-item>
                <el-form-item label="回复问题" prop="reply">
                    <el-input type="textarea" :rows="6" style="width: 400px" v-model="form.reply" placeholder="请输入回复内容"></el-input>
                </el-form-item>
                <el-form-item label="回复附件" prop="file">
                    <el-upload accept=".pdf, .PDF" :file-list="form.fileList" action="https://tuanfeng.whkxzj.com/file/upload" :limit="1" :on-success="onUploadSuccess" :before-upload="beforUpload">
                    <!-- <el-upload accept=".pdf, .PDF" :file-list="form.fileList" action="http://localhost:8083/file/upload" :limit="1" :on-success="onUploadSuccess" :before-upload="beforUpload"> -->
                        <el-button type="primary">上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">请上传PDF类型的附件，大小不超过20MB</div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
        </EditDrawer>
        
        <LogDialog :visible="logVisible" :path="path" @update:visible="logVisible = $event"></LogDialog>
    </div>
</template>

<style lang="less" scoped>
@import url("../../assets/less/common.less");
@import url("../../assets/less/search.less");

.form-item {
    font-size: 14px;
    line-height: 20px;
    color: @color_regular-text;
    margin-bottom: 20px;
    display: flex;
    .form-item-label {
        flex: none;
        width: 100px;
        text-align: right;
        padding-right: 12px;
        box-sizing: border-box;
    }
    .form-item-value {
        flex: none;
        width: 400px;
        padding-right: 20px;
        color: @color_primary-text;
    }
}
</style>